<template>
  <JeepayCustomNavbar bgDefaultColor="#fff" title="关于我们" backCtrl="back" />
  <view class="content">
    <view class="logo-box">
      <view class="app-logo"><image :src="vdata.siteInfos.iconUrl"></image></view>
      <view class="app-name">
        <text>{{ $appName }}</text>
      </view>

      <view class="app-version">
        <!-- #ifdef APP-PLUS  -->
        <text>{{ vdata.versionName }}</text>
        <!-- #endif -->
      </view>
    </view>
    <view class="company-item">
      <view class="item">
        <view class="title"><text>公司名称</text></view>
        <view class="describe">
          <text>{{ vdata.siteInfos.companyName }}</text>
        </view>
      </view>
      <view class="item" @tap="call">
        <view class="title"><text>联系电话</text></view>
        <view class="describe">
          <text style="color: #3981ff">{{ vdata.siteInfos.companyTel }}</text>
        </view>
      </view>
      <view class="item">
        <view class="title"><text>电子邮箱</text></view>
        <view class="describe">
          <text>{{ vdata.siteInfos.companyEmail }}</text>
        </view>
      </view>
      <view class="item" @tap="go.to('/pages/login/serviceAgreement')">
        <view class="title"><text>服务协议</text></view>
        <view class="describe"><image src="@/static/iconImg/icon-arrow-small.svg" class="arrow"></image></view>
      </view>
      <view class="item" @tap="go.to('/pages/login/privacyPolicy')">
        <view class="title"><text>隐私政策</text></view>
        <view class="describe"><image src="@/static/iconImg/icon-arrow-small.svg" class="arrow"></image></view>
      </view>
      <!-- #ifdef APP-PLUS  -->
      <view class="item" @tap="checkCurrVersion('checked')">
        <view class="title"><text>检查新版本</text></view>
        <view class="describe">
          <text>{{ vdata.versionName }}</text>
        </view>
      </view>
      <!-- #endif -->
    </view>
    <!-- 拨打电话对话框 -->
    <uni-popup ref="phonePopup" type="dialog" @maskClick="closePopup">
      <uni-popup-dialog ref="phonePopup" type="dialog" mode="base" @close="close" title="提示" @confirm="confirm">
        <view class="tip-content">是否联系客服?</view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import go from '@/commons/utils/go.js'
import storageManage from '@/commons/utils/storageManage.js'
import {checkCurrVersion, getCurrentVersionPromise} from '@/commons/utils/versionManage.js';

let phonePopup = ref()
const vdata = reactive({
	siteInfos: storageManage.siteInfos(),
	versionName: 'v1.0.0',
})

onLoad(() => {
	getCurrentVersionPromise().then(res => {
		vdata.versionName = res.version
	}).catch(error => {});
})

function close() {
  phonePopup.value.close()
}

function confirm() {
  phonePopup.value.close()
  uni.makePhoneCall({
    phoneNumber: vdata.siteInfos.companyTel
  })
}
// 拨打电话弹窗
function call() {
  phonePopup.value.open()
}
// 关闭电话弹窗
function closePopup() {
  phonePopup.value.close()
}
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}
.content {
  .logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 373rpx;

    overflow: hidden;
    .app-logo {
      margin: 70rpx 0 50rpx 0;
      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
    .app-name {
      margin-bottom: 10rpx;
      text {
        font-size: 33rpx;
        font-weight: 700;
      }
    }
    .app-version {
      text {
        font-size: 25rpx;
      }
    }
  }
  .company-item {
    padding: 0 85rpx;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 110rpx;
      .title {
        text {
          font-size: 28rpx;
          color: #666f80;
        }
      }
      .describe {
        display: flex;
        align-items: center;
        text {
          font-size: 28rpx;
        }
        image {
          width: 120rpx;
          height: 120rpx;
        }
      }
    }
    .item:last-child {
      border-bottom: 1rpx solid #ededed;
    }
    .item:first-child {
      border-top: 1rpx solid #ededed;
    }
  }
  .tip-content-title {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 80rpx;
    padding-top: 20rpx;
    font-weight: bold;
    font-size: 34rpx;
    text-align: left;
    color: #0041c4;
    letter-spacing: 0.05em;
  }
  .tip-content {
    @extend .tip-content-title;
    height: 0;
    font-size: 32rpx;
    font-weight: 500;
    text-align: left;
    color: #000;
  }
}
.arrow{
transform: translateX(50rpx);
}
</style>
